<template>
  <div style="background: #fff">
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="detail">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img :src="detailInfo.cover_url" />
        </van-swipe-item>
      </van-swipe>
      <p>商品名称:{{ detailInfo.title }}</p>
      <p>商品名称:{{ detailInfo.description }}</p>
      <div v-html="detailInfo.details"></div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="wap-home-o" text="主页" />
      <van-goods-action-icon @click="$router.push('/cart')" icon="cart-o" text="购物车" :badge='$store.state.CartData.data.length ||"" ' />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        type="warning"
        @click="showDetail('add')"
        text="加入购物车"
      />
      <van-goods-action-button
        type="danger"
        @click="showDetail('buy')"
        text="立即购买"
      />
    </van-goods-action>
    <van-popup
      round
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-card
        :num="value"
        :price="detailInfo.price || ''"
        :desc="detailInfo.description"
        :title="detailInfo.name"
        :thumb="detailInfo.cover_url"
      >
       <template #footer>
          <van-stepper  v-model="value" />
       </template>
      </van-card>
      <van-button type="primary" size="large" @click="action">添加</van-button>
    </van-popup>
  </div>
</template>

<script>
import { getDetail } from '@api/home'
import { mapMutations } from 'vuex'
export default {
  name: 'detail',
  data () {
    return {
      detailInfo: {},
      show: false,
      value: 1,
      info: ''
    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    ...mapMutations('CartData', ['add_Item', 'Update_num']),
    getDetail () {
      getDetail(this.$route.params.id).then((res) => {
        if (res.status === 200) {
          this.detailInfo = res.data.goods
        }
      })
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    showDetail (info) {
      this.info = info
      this.show = true
    },
    action () {
      if (this.info === 'add') {
        const isAdd = this.$store.state.CartData.data.findIndex(el => el.title === this.detailInfo.title)
        if (isAdd === -1) {
          this.add_Item({ ...this.detailInfo, num: this.value, checked: false })
        } else {
          const num = this.value
          this.Update_num({ isAdd, num })
        }
        this.$toast.success('添加成功')
      } else {
        console.log('买买买')
      }
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  margin-bottom: 50px;
  p {
    font-size: 14px;
    margin-left: 30px;
    margin-top: 10px;
  }
  /deep/ img {
    margin: 0 auto;
    display: block;
    width: 200px;
    height: 200px;
  }
}
/deep/ .van-card {
  padding-top: 20px;
  height: 70%;
}
.van-stepper {
  margin-top: 2px;
  float: right;
}
</style>
